<template>
    <div class="main">
      <el-table
        :data="users"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column lable="头像" width="120">
          <template slot-scope="scope">  <!-- 使用template 标签表示把当前对象定义出来 包含行的对象所以 要访问值需要访问row属性-->
            <img :src="getImgUrl(scope.row.img)" style="width: 30px;height: 30px"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="uId"
          label="编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性別">
        </el-table-column>
        <el-table-column
          label="用户等级"
          width="180">
          <span>初级用户</span>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEditUser(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button size="mini" @click="handleAddUser">
        新增
      </el-button>
      <addUser v-if="addDialogIsShow" ref="showAddUser"></addUser>
      <editUser v-if="editDialogIsShow" ref="showEditUser"></editUser>

    </div>
</template>

<script>
  import api from "../../../../axios/api"
  import addUser from '@/components/back/user/addUser.vue'
  import editUser from '@/components/back/user/editUser.vue'
    export default {
        name: "index",
        addDialogIsShow:false,
        editDialogIsShow:false,
      components:{
        addUser,editUser
      },
      data(){
          return {
            users:[],
            addDialogIsShow:false,
            editDialogIsShow:false
          }
      },
      methods: {
        getImgUrl: function (imgsrc) {
          return "../../../static/images/scrolls/" + imgsrc;
        },
        tableRowClassName({row, rowIndex}) {
          if (rowIndex % 2 == 0) {
            return 'warning-row';
          } else {
            return '';
          }
          return '';
        },
        setDataFromAxios: function () {
          //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
          api.setDataFromAxios("/users", null, "post")
            .then(res => {
              this.users = res;
              console.log(this.users);
            });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
        },
        handleEditUser:function(index,user){
          console.log(index + "   "+ user.uId);
          let _this = this;   //this代表方法调用者 this代表vue对象
          _this.editDialogIsShow = true;
          _this.$nextTick(() => {  //下一步操作
            _this.$refs.showEditUser.init(user);  //找到vue对象中定义ref集合（$refs就是ref集合 上面ref定义的名字叫showAddUser）调用子组件的init方法
          })
        },
        handleDelete:function(index,row){
          console.log(index + "   "+ row.uId);
        },
        handleAddUser:function(){
          let _this = this;   //this代表方法调用者 this代表vue对象
          _this.addDialogIsShow = true;
          _this.$nextTick(() => {  //下一步操作
            _this.$refs.showAddUser.init();  //找到vue对象中定义ref集合（$refs就是ref集合 上面ref定义的名字叫showAddUser）调用子组件的init方法
          })
        }
      },
      created:function () {
        this.setDataFromAxios();//1.创建页面的时候 调用自定义的数据请求方法  而数据请求方法把得到数据赋值给了当前页面的变量
      }
    }
</script>

<style scoped lang="stylus">
  .main
    width 1000px
    margin 0 auto
  /deep/ .warning-row  /*不写deep渲染出错*/
    background-color oldlace
</style>
